<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<!--两种适配js文件-->>
<!-- <script src="./flexible.js"></script> -->
<script src="http://g.tbcdn.cn/mtb/lib-flexible/0.3.2/??flexible_css.js,flexible.js"></script>
<style>
    #divs{
      
        width: 200px;
        height: 50px;
        background-color: blueviolet;
        /* <!--鼠标点上去是十字箭头--> */
        cursor: move;
    }
    #father{
        width: 200px;
        height: 200px;
        background-color: chocolate;
        /*  父元素一定要开启定位 */
        position: absolute;
    }
</style>
<script src="./jquery/jquery.js"></script>
<body>
    <div id="father"><div id="divs"></div></div>
    <script>
let div=document.querySelector("#divs");
let div_p=document.querySelector("#father");
div.addEventListener("mousedown",function(e){
         let x=e.pageX-div_p.offsetLeft;//div_p.offsetLeft偏移量就为鼠标的偏移量
          let y=e.pageY-div_p.offsetTop;
        console.log(e.pageX);
          function move(e){
              div_p.style.left=e.pageX-x+"px";
              div_p.style.top=e.pageY-y+"px";
          }
          document.addEventListener("mousemove",move);
         

        document.addEventListener("mouseup",function(){
            document.removeEventListener("mousemove",move);
        })
})
    </script>
</body>
</html>